import formatDistanceToNow from 'date-fns/formatDistanceToNow'

import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { ScrollArea } from '@/components/ui/scroll-area'
import { useSelector, useDispatch } from 'react-redux'
import { selectCurMention, selectPaginationConfig, setCurMention, setPaginationConfig } from '@/store/mention-slice'
import { Pagination, PaginationContent, PaginationItem } from '@/components/ui/pagination'
import { Button } from '@/components/ui/button'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { useEffect, useRef } from 'react'

export function MailList({ items }) {
  const curMention = useSelector(selectCurMention)
  const paginationConfig = useSelector(selectPaginationConfig)
  const dispatch = useDispatch()
  // const listRef = useRef(null)

  // useEffect(() => {
  //   if (listRef.current) {
  //     listRef.current.scrollIntoView({ behavior: 'smooth' })
  //   }
  // }, [items]) // This will trigger when new data is loaded

  if (items.length <= 0) {
    return (
      <ScrollArea className="h-screen">
        <div className="flex flex-col gap-2 p-4 pt-0">
          Your keywords are tracking. The result will listed below.You will receive an email whenever these are found
          (usually within a few minutes).
        </div>
      </ScrollArea>
    )
  }

  // return <InfScrollArea/>

  return (
    <ScrollArea className="h-[calc(100vh-238px)]">
      <div className="flex flex-col gap-2 p-4 pt-0">
        {items.map(item => (
          <button
            key={item.id}
            className={cn(
              'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
              curMention.selected === item.id && 'bg-muted'
            )}
            onClick={() =>
              dispatch(
                setCurMention({
                  ...curMention,
                  selected: item.id,
                })
              )
            }
          >
            <div className="flex w-full flex-col gap-1">
              <div className="flex items-center">
                <div className="flex items-center gap-2">
                  <div className="font-semibold">{item.keyword}</div>
                  {!item.read && <span className="flex h-2 w-2 rounded-full bg-blue-600" />}
                </div>
                <div
                  className={cn(
                    'ml-auto text-xs',
                    curMention.selected === item.id ? 'text-foreground' : 'text-muted-foreground'
                  )}
                >
                  {formatDistanceToNow(new Date(item.createtime * 1000), {
                    addSuffix: true,
                  })}
                </div>
              </div>
            </div>
            <div className="line-clamp-2 text-xs text-muted-foreground">{item.content?.substring(0, 300)}</div>
            <div className="text-xs font-medium">r/{item.sr}</div>
            <div className="flex items-center gap-2">
              <Badge variant="secondary">{item.type}</Badge>
            </div>
          </button>
        ))}
      </div>
      <div className="p-4 pt-0">
        <Pagination>
          <PaginationContent>
            {true && (
              <PaginationItem>
                <Button
                  variant="ghost"
                  onClick={() => {
                    dispatch(
                      setPaginationConfig({ ...paginationConfig, currentPage: paginationConfig.currentPage - 1 })
                    )
                  }}
                  disabled={paginationConfig.currentPage === 1}
                >
                  <ChevronLeft className="h-4 w-4" />
                  <span>Previous</span>
                </Button>
              </PaginationItem>
            )}
            <PaginationItem>
              {paginationConfig.currentPage} / {paginationConfig.lastPage}
            </PaginationItem>
            {true && (
              <PaginationItem>
                <Button
                  variant="ghost"
                  onClick={() => {
                    dispatch(
                      setPaginationConfig({ ...paginationConfig, currentPage: paginationConfig.currentPage + 1 })
                    )
                  }}
                  disabled={paginationConfig.currentPage === paginationConfig.lastPage}
                >
                  <span>Next</span>
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </PaginationItem>
            )}
          </PaginationContent>
        </Pagination>
      </div>
    </ScrollArea>
  )
}
